{% set ORDER_TRANSACTION_STATE_OPEN = constant('Shopware\\Core\\Checkout\\Order\\Aggregate\\OrderTransaction\\OrderTransactionStates::STATE_OPEN') %}
{% set ORDER_TRANSACTION_STATE_FAILED = constant('Shopware\\Core\\Checkout\\Order\\Aggregate\\OrderTransaction\\OrderTransactionStates::STATE_FAILED') %}
{% set ORDER_TRANSACTION_STATE_REMINDED = constant('Shopware\\Core\\Checkout\\Order\\Aggregate\\OrderTransaction\\OrderTransactionStates::STATE_REMINDED') %}
{% set ORDER_TRANSACTION_STATE_CANCELLED = constant('Shopware\\Core\\Checkout\\Order\\Aggregate\\OrderTransaction\\OrderTransactionStates::STATE_CANCELLED') %}
{% set ORDER_TRANSACTION_STATE_UNCONFIRMED = constant('Shopware\\Core\\Checkout\\Order\\Aggregate\\OrderTransaction\\OrderTransactionStates::STATE_UNCONFIRMED') %}
{% set ALLOWED_TRANSACTION_STATES = constant('Shopware\\Core\\Checkout\\Order\\SalesChannel\\OrderService::ALLOWED_TRANSACTION_STATES') %}
{% set ORDER_STATE_CANCELLED = constant('Shopware\\Core\\Checkout\\Order\\OrderStates::STATE_CANCELLED') %}
{% set PRODUCT_LINE_ITEM_TYPE = constant('Shopware\\Core\\Checkout\\Cart\\LineItem\\LineItem::PRODUCT_LINE_ITEM_TYPE') %}

{% block page_account_order_item_overview %}
    <article class="order-wrapper" aria-label="{{ 'account.orderItemAriaLabel'|trans({ '%order_number%': order.orderNumber }) }}">
        <div class="order-item-header">
            {% set states = [
                ORDER_TRANSACTION_STATE_FAILED,
                ORDER_TRANSACTION_STATE_REMINDED,
                ORDER_TRANSACTION_STATE_UNCONFIRMED,
                ORDER_TRANSACTION_STATE_CANCELLED
            ] %}

            {% set orderState = order.stateMachineState.technicalName %}
            {% set orderPaymentState = order.transactions.last.stateMachineState.technicalName %}

            {% set isPaymentNeeded = orderPaymentState in states and orderState != ORDER_STATE_CANCELLED %}

            <div class="row flex-wrap">
                {% block page_account_order_item_heading %}
                    <div class="h3 col-auto order-table-header-heading">
                        {{ 'account.orderHeadline'|trans|sw_sanitize }} {{ order.orderDateTime|format_date('medium', locale=app.request.locale) }}
                    </div>
                {% endblock %}

                {% block page_account_order_item_status_col %}
                    <div class="col-12 col-sm">
                        {% block page_account_order_item_status %}
                            <div class="order-table-header-order-status">
                                {% if isPaymentNeeded %}
                                    {% block page_account_order_item_status_badge_payment_process_needed %}
                                        <a href="{{ path('frontend.account.edit-order.page', { orderId: order.id }) }}"
                                           class="badge badge-lg order-item-status-badge bg-danger">
                                            {{ 'account.orderStatusActionCompletePayment'|trans|sw_sanitize }}
                                            {% sw_icon 'arrow-medium-right' style { size: 'sm', pack: 'solid' } %}
                                        </a>
                                    {% endblock %}
                                {% else %}
                                    {% block page_account_order_item_status_badge %}
                                        <span class="badge badge-lg order-item-status-badge order-item-status-badge-{{ orderState }}">
                                            <span class="visually-hidden">{{ 'account.orderStatus'|trans|sw_sanitize }}</span>
                                            {{ order.stateMachineState.translated.name }}
                                        </span>
                                    {% endblock %}
                                {% endif %}
                            </div>
                        {% endblock %}
                    </div>
                {% endblock %}

                {% block page_account_order_item_context_menu_col %}
                    <div class="col-1 order-table-header-context-menu-wrapper">
                        {% if isPaymentNeeded %}
                            <span class="order-table-header-context-menu-indicator notification-dot notification-dot-danger"></span>
                        {% endif %}

                        {% block page_account_order_item_context_menu %}
                            {% block page_account_order_item_context_menu_button %}
                                <button class="btn order-table-header-context-menu btn-light float-end"
                                        type="button"
                                        id="accountOrderDropdown-{{ order.id }}"
                                        data-bs-toggle="dropdown"
                                        aria-haspopup="true"
                                        aria-expanded="false"
                                        aria-label="{{ 'account.orderActions'|trans|sw_sanitize }}">
                                    {% sw_icon 'more-horizontal' %}
                                </button>
                            {% endblock %}

                            {% block page_account_order_item_context_menu_content %}
                                <div class="dropdown-menu dropdown-menu-end order-table-header-context-menu-content"
                                     aria-labelledby="accountOrderDropdown-{{ order.id }}">
                                    {% if orderState != ORDER_STATE_CANCELLED and orderPaymentState in ALLOWED_TRANSACTION_STATES %}
                                        {% block page_account_order_item_context_menu_content_change_payment_button %}
                                            {% if isPaymentNeeded %}
                                                <a class="dropdown-item order-table-header-context-menu-content-link"
                                                   href="{{ path('frontend.account.edit-order.page', { orderId: order.id }) }}">
                                                    <strong>{{ 'account.orderStatusActionCompletePayment'|trans|sw_sanitize }}</strong>
                                                </a>
                                            {% else %}
                                                <a class="dropdown-item order-table-header-context-menu-content-link"
                                                   href="{{ path('frontend.account.edit-order.page', { orderId: order.id }) }}">
                                                    {{ 'account.orderContextMenuChangePayment'|trans|sw_sanitize }}
                                                </a>
                                            {% endif %}
                                        {% endblock %}
                                    {% endif %}

                                    {% block page_account_order_item_context_menu_reorder %}
                                        {% set action %}
                                            {% block page_account_order_item_context_menu_reorder_form_action %}
                                                {{ path('frontend.checkout.line-item.add') }}
                                            {% endblock %}
                                        {% endset %}

                                        {% block page_account_order_item_context_menu_reorder_form %}
                                            <form action="{{ action }}"
                                                  id="orderDetailForm-{{ order.Id }}"
                                                  method="post"
                                                  class="order-table-header-context-menu-content-form"
                                                  data-add-to-cart="true">
                                                {% block page_account_order_item_context_menu_reorder_form_redirect %}
                                                    <input type="hidden" name="redirectTo" value="frontend.cart.offcanvas">
                                                {% endblock %}

                                                {% block page_account_order_item_context_menu_reorder_form_line_items_input %}
                                                    {% for lineItem in order.lineItems %}
                                                        {% block page_account_order_item_context_menu_reorder_form_line_item_input %}
                                                            {% if lineItem.type == PRODUCT_LINE_ITEM_TYPE %}
                                                                <input type="hidden"
                                                                       name="lineItems[{{ lineItem.identifier }}][id]"
                                                                       value="{{ lineItem.identifier }}">
                                                                <input type="hidden"
                                                                       name="lineItems[{{ lineItem.identifier }}][referencedId]"
                                                                       value="{{ lineItem.referencedId }}">
                                                                <input type="hidden"
                                                                       name="lineItems[{{ lineItem.identifier }}][type]"
                                                                       value="{{ lineItem.type }}">
                                                                <input type="hidden"
                                                                       name="lineItems[{{ lineItem.identifier }}][stackable]"
                                                                       value="1">
                                                                <input type="hidden"
                                                                       name="lineItems[{{ lineItem.identifier }}][removable]"
                                                                       value="1">
                                                                <input type="hidden"
                                                                       name="lineItems[{{ lineItem.identifier }}][quantity]"
                                                                       value="{{ lineItem.quantity }}">
                                                            {% endif %}
                                                        {% endblock %}
                                                    {% endfor %}
                                                {% endblock %}

                                                {% block page_account_order_item_context_menu_reorder_form_button %}
                                                    <button class="dropdown-item order-table-header-context-menu-content-link" type="submit">{{ 'account.orderContextMenuReorder'|trans|sw_sanitize }}</button>
                                                {% endblock %}
                                            </form>
                                        {% endblock %}
                                    {% endblock %}

                                    {% block page_account_order_item_context_menu_cancel_order %}
                                        {% if orderState != ORDER_STATE_CANCELLED and config('core.cart.enableOrderRefunds') %}

                                            {% set modalId = 'cancelOrderModal-' ~ order.id %}

                                            <button type="button"
                                                    class="dropdown-item order-table-header-context-menu-content-link"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#{{ modalId }}">
                                                {{ 'account.editOrderCancelOrderButton'|trans|sw_sanitize }}
                                            </button>
                                        {% endif %}
                                    {% endblock %}
                                </div>
                            {% endblock %}
                        {% endblock %}

                        {% if orderState != ORDER_STATE_CANCELLED %}
                            {% sw_include '@Storefront/storefront/page/account/order/cancel-order-modal.html.twig' %}
                        {% endif %}
                    </div>
                {% endblock %}

                {% block page_account_order_item_order_number_col %}
                    <div class="col-12 order-table-header-order-number">
                        {% block page_account_order_item_order_number %}
                            <strong class="order-table-header-label">{{ 'account.orderNumber'|trans|sw_sanitize }}</strong>
                            <span class="order-table-body-value">{{ order.orderNumber|sw_sanitize }}</span>
                        {% endblock %}
                    </div>
                {% endblock %}
            </div>

            {% block page_account_order_item_order_table_header_col %}
                {% block page_account_order_item_order_table_header %}
                    <div class="col-12 row order-table-header-order-table-header" aria-hidden="true">
                        {% block page_account_order_item_order_table_header_cell_shipping_status %}
                            {% if order.deliveries|length > 0 %}
                                <div class="col-12 col-sm order-table-header-order-table-header-cell">{{ 'account.orderShippingStatus'|trans|sw_sanitize }}</div>
                            {% endif %}
                        {% endblock %}

                        {% block page_account_order_item_order_table_header_cell_payment_status %}
                            <div class="col-12 col-sm order-table-header-order-table-header-cell">{{ 'account.orderPaymentStatus'|trans|sw_sanitize }}</div>
                        {% endblock %}

                        {% block page_account_order_item_order_table_header_cell_payment_method %}
                            <div class="col-12 col-sm order-table-header-order-table-header-cell">{{ 'account.orderPaymentMethod'|trans|sw_sanitize }}</div>
                        {% endblock %}

                        {% block page_account_order_item_order_table_header_cell_shipping_method %}
                            {% if order.deliveries|length > 0 %}
                                <div class="col-12 col-sm order-table-header-order-table-header-cell">{{ 'account.orderShippingMethod'|trans|sw_sanitize }}</div>
                            {% endif %}
                        {% endblock %}

                        {% block page_account_order_item_order_table_header_cell_placeholder %}
                            <div class="col-2 order-table-header-order-table-header-cell"></div>
                        {% endblock %}
                    </div>
                {% endblock %}
            {% endblock %}

            {% block page_account_order_item_order_table_body_col %}
                {% block page_account_order_item_order_table_body %}
                    <div class="col-12 row order-table-header-order-table-body">
                        {% block page_account_order_item_order_table_body_cell_shipping_status %}
                            {% if order.deliveries|length > 0 %}
                                <div class="col-12 col-sm order-table-header-order-table-body-cell">
                                    <strong class="order-table-header-label">
                                        {{ 'account.orderShippingStatus'|trans|sw_sanitize }}{{ 'account.colonCharacter'|trans|sw_sanitize }}
                                    </strong>
                                    <span class="order-table-body-value">{{ order.deliveries|first.stateMachineState.translated.name }}</span>
                                </div>
                            {% endif %}
                        {% endblock %}

                        {% block page_account_order_item_order_table_body_cell_payment_status %}
                            <div class="col-12 col-sm order-table-header-order-table-body-cell">
                                <strong class="order-table-header-label">
                                    {{ 'account.orderPaymentStatus'|trans|sw_sanitize }}{{ 'account.colonCharacter'|trans|sw_sanitize }}
                                </strong>
                                <span class="order-table-body-value">{{ order.transactions|last.stateMachineState.translated.name }}</span>
                            </div>
                        {% endblock %}

                        {% block page_account_order_item_order_table_body_cell_payment_method %}
                            <div class="col-12 col-sm order-table-header-order-table-body-cell">
                                <strong class="order-table-header-label">
                                    {{ 'account.orderPaymentMethod'|trans|sw_sanitize }}{{ 'account.colonCharacter'|trans|sw_sanitize }}
                                </strong>
                                <span class="order-table-body-value">{{ order.transactions|last.paymentMethod.translated.name }}</span>
                            </div>
                        {% endblock %}

                        {% block page_account_order_item_order_table_body_cell_shipping_method %}
                            {% if order.deliveries|length > 0 %}
                                <div class="col-12 col-sm order-table-header-order-table-body-cell">
                                    <strong class="order-table-header-label">
                                        {{ 'account.orderShippingMethod'|trans|sw_sanitize }}{{ 'account.colonCharacter'|trans|sw_sanitize }}
                                    </strong>
                                    <span class="order-table-body-value">{{ order.deliveries|first.shippingMethod.translated.name }}</span>
                                </div>
                            {% endif %}
                        {% endblock %}

                        {% block page_account_order_item_order_table_body_cell_toggle_order_details %}
                            <div class="col-12 col-sm-2 order-item order-item-actions order-table-header-order-table-body-cell">
                                {% block page_account_order_item_order_table_body_cell_toggle_order_details_button %}
                                    <button class="btn btn-light btn-sm order-hide-btn collapsed"
                                            data-bs-toggle="collapse"
                                            data-bs-target="#order{{ order.orderNumber }}"
                                            aria-expanded="false"
                                            aria-controls="order{{ order.orderNumber }}">
                                        {% block page_account_order_item_order_table_body_cell_toggle_order_details_button_text %}
                                            <span class="order-hide-btn-text">{{ 'account.orderActionHide'|trans|sw_sanitize }}</span>
                                            <span class="order-view-btn-text">{{ 'account.orderActionView'|trans|sw_sanitize }}</span>
                                        {% endblock %}
                                    </button>
                                {% endblock %}
                            </div>
                        {% endblock %}
                    </div>
                {% endblock %}
            {% endblock %}
        </div>

        {% block page_account_order_item_detail %}
            {% sw_include '@Storefront/storefront/page/account/order-history/order-detail.html.twig' %}
        {% endblock %}
    </article>
{% endblock %}
